<%-- 
    Document   : detail
    Created on : 2014-9-5, 11:59:05
    Author     : chensy
--%>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" session="false" %>
<%@ include file="/WEB-INF/jspf/import.jspf" %>  
<!doctype HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <title> 品牌车友会-终端页 </title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="LiuLong_gz ZhongQingbiao_gz"/>
        <link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2015/club_brand/brand_ss.css">
    </head>

    <body class="g-doc" id="Jlazy_img">

        <!--栏目计数器/文章计数器-->
        <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="7695" />
        </jsp:include>
        <script class=" defer" src="http://www.pcauto.com.cn/global/wap/1411/intf6047.html" charset="utf-8"></script>
        <!-- 公共头部 S -->
        <nav class="g-hd">
            <a href="http://m.pcauto.com.cn" class="header-home" title="太平洋汽车网"></a>
            <div class="header-title">
                <span class="header-title-nav">
                    <a href="${OCLUBWAPROOT}/${fn:escapeXml(oClub.url)}">${fn:escapeXml(oClub.name)}</a>
                </span>
            </div>
        </nav>
        <!-- 公共头部 E -->
        <!-- 
           出页面时候，判断说说之前是否点过赞。如果没有点过赞的，则为class为like的增加一个class：i-unlike，若是点过赞的则增加class：i-like。
            在当前页面点击赞，为like增加class like-clicked，此class仅为了实现css动画，实际样式用i-unlike和i-like控制。
        -->
        <!-- 三张 或者 五张及其以上张图 -->
        <div class="ss clf">
            <div class="col-a">
                <a href="${UCWAPROOT}/${dynaInfo.createBy}" title=""><img class="user-hd-ph" src="${f:face(dynaInfo.createBy,100)}" alt=""></a>
            </div>
            <div class="col-bc clf">
                <p>${content}</p>
                <c:if test="${not empty dynaInfo.images}">
                    <div class="pic-wrap ${imagesLength==1?"pics_1":imagesLength==4?"pics_4":""}">
                    <c:if test="${imagesLength>1 && imagesLength<=9 && imagesLength!=4}">
                        <c:forEach var="img" items="${dynaInfo.images}">
                                <img width="74" height="74" src="${f:transPicUrl(img.url500x500,150,150)}" data-meta="${img.url400x400}" alt="">
                        </c:forEach>
                    </c:if>
                    <c:if test="${imagesLength==4}">
                        <c:forEach var="img" items="${dynaInfo.images}" varStatus="status">
                            <img width="74" height="74" src="${f:transPicUrl(img.url500x500,150,150)}" data-meta="${img.url400x400}" alt="">
                        </c:forEach>
                   </c:if>
                    <c:if test="${imagesLength==1}">
                        <c:forEach var="img" items="${dynaInfo.images}">
                            <c:if test="${img.width>img.height}">
                                <c:if test="${img.height<90}">
                                    <c:if test="${img.width>300}">
                                        <img width="150" height="<fmt:formatNumber value="${(img.height/(img.width/300))/2}" pattern="#"></fmt:formatNumber>" src="${f:transPicUrl(img.url500x500,300,img.height/(img.width/300))}" data-meta="${img.url400x400}" alt="">
                                    </c:if>
                                    <c:if test="${img.width<=300}">
                                        <img width="150" height="<fmt:formatNumber value="${(img.height/(img.width/300))/2}" pattern="#"></fmt:formatNumber>" src="${f:transPicUrl(img.url500x500,300,img.height/(img.width/300))}" data-meta="${img.url400x400}" alt="">
                                    </c:if>
                                </c:if>
                                <c:if test="${img.height>=90}">
                                    <c:if test="${img.width>300}">
                                        <img width="150" height="<fmt:formatNumber value="${(img.height/(img.width/300))/2}" pattern="#"></fmt:formatNumber>"  src="${f:transPicUrl(img.url500x500,300,img.height/(img.width/300))}" data-meta="${img.url400x400}" alt="">
                                    </c:if>
                                    <c:if test="${img.width<=300}">
                                        33  <img width="150" height="<fmt:formatNumber value="${(img.height/(img.width/300)/2)}" pattern="#"></fmt:formatNumber>" src="${f:transPicUrl(img.url500x500,300,img.height/(img.width/300))}" data-meta="${img.url400x400}" alt="">
                                    </c:if>
                                </c:if>
                            </c:if>
                            <c:if test="${img.width<img.height}">
                                <c:if test="${img.width<90}">
                                    <c:if test="${img.height>300}">
                                        <img width="45" height="150" src="${f:transPicUrl(img.url500x500,90,300)}" data-meta="${img.url400x400}" alt="">
                                    </c:if>
                                    <c:if test="${img.height<=300}">
                                        <img width="<fmt:formatNumber value="${(img.width/(img.height/300))/2}" pattern="#"></fmt:formatNumber>" height="150" src="${f:transPicUrl(img.url500x500,img.width/(img.height/300),300)}" data-meta="${img.url400x400}" alt="">
                                    </c:if>
                                </c:if>
                                <c:if test="${img.width>=90}">
                                    <img width="<fmt:formatNumber value="${(img.width/(img.height/300))/2}" pattern="#"></fmt:formatNumber>" height="150"  src="${f:transPicUrl(img.url500x500,img.width/(img.height/300),300)}" data-meta="${img.url400x400}" alt="">
                                </c:if>
                            </c:if>
                            <c:if test="${img.width==img.height}">
                                <img width="150" height="150" src="${f:transPicUrl(img.url500x500, 300, 300)}" data-meta="${img.url400x400}" alt="">
                            </c:if>
                    </c:forEach>
                </c:if>
                </div>
                </c:if>
                <div class="pub-foot clf">
                    <span class="pub-time">${time}</span>
                    <div class="re-wrap">
                        <a href="javascript:void(0);" class="like ${isPraise?'i-like':'i-unlike'}" data-isPraise="${isPraise?1:0}" id="doPraise"><i class="icon"></i><em>${dynaInfo.praiseCount>0?dynaInfo.praiseCount:"赞"}</em></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="publish-box clf">
            <textarea name="" id="J-txt-publish" placeholder="请输入内容"></textarea>
            <div class="pub-tools" id="J-pub-tools" style="display:none">
                <div class="clf">
                    <span class="m-face-pic-btn clf" id="JfatieTfFaceBtn">
                        <i class="m-face-btn"></i>
                        <!-- <i class="m-pic-btn"></i> -->
                    </span>
                    <div class="cel-sub-btn clf">
                        <i class="cancel-btn">取消</i>
                        <i class="submit-btn" onclick="replyDyna();" id="J-submitBtn">发布</i>
                    </div>
                </div>
                <div class="m-face-list"></div>
            </div>
        </div>

        <!-- 网友评论 -->
        <div class="commit" id="replyDiv" style="display:${not empty listReply.resultList?"":"none;"}">
            <div class="header">网友评论</div>
            <ul class="li-wrap" id="replyList">
                <c:forEach items="${listReply.resultList}" var="reply">
                    <li>
                        <div class="col-a">
                            <a href="${UCWAPROOT}/${reply.createBy}" title=""><img class="user-hd-ph" src="http://www1.pcauto.com.cn/images/holder.png" #src="${f:face(reply.createBy,100)}" alt=""></a>
                        </div>
                        <div class="col-bc clf">
                            <p class="user-name">${reply.createName}</p>
                            <h3 class="">${f:transformToBBSFace(reply.content)}</h3>
                        </div>
                            <span class="pub-time">${f:fmtDate(reply.createAt)}</span>
                    </li>
                </c:forEach>
            </ul>
            <c:if test="${listReply.pageNo < listReply.pageCount}">
            <a href="javascript:;" id="J-loadmore1" class="loadmore"><i>点击加载更多</i></a>
            </c:if>
        </div>
        <div class="pop" id="loginDiv" style="display:none;">
            <p>要登录后才能发言哦~</p>
            <a href="javascript:login();" class="login">马上登录</a>
        </div>

        <div id="Jfoot" class="g-footer">
            <!-- 公共底部 -->
            <script src="http://www.pcauto.com.cn/global/wap/1411/intf6027.html" charset="utf-8"></script>
        </div>
        <script src="http://js.3conline.com/wap/pcauto/common/zepto1.1.6.min.js" ></script>
        <script src="http://js.3conline.com/wap/pcauto/2015/club_brand/js/fatie.js"></script>
        <script src="http://js.3conline.com/wap/common/swipe.extend-min.js" charset="utf-8"></script>
        <script src="http://js.3conline.com/wap/common/wap.lazy-min.js"></script>
        <script src="http://js.3conline.com/wap/pcauto/2015/club_brand/js/showBigPic.js"></script>
        <jsp:include page="../common/face.jsp" />
        <script>
            var loadReplyUrl="${OCLUBWAPROOT}/dyna/getReplyList.do";
            var doPraiseUrl="${WAPROOT}/dyna/doPraise.do";
            var replyUrl = "${WAPROOT}/dyna/replyDyna.do";
            var dynaInfoId = "${dynaInfo.dynaInfoId}";
            var oClubId = "${oClub.oClubId}";
            var createDate = "<fmt:formatDate value="${dynaInfo.createAt}"  pattern="yyyy-MM-dd"></fmt:formatDate>";
            var isLogin=${isLogin};
            var pageNo = 1;
            var pageSize = 10;
            var isPraise = 1;
            var notPraise = 0;
            var replyHtml = '<li><div class="col-a"><a href="{userUrl}" title=""><img class="user-hd-ph" src="http://www1.pcauto.com.cn/images/holder.png" #src="{faceUrl}" alt="">'
                +'</a></div><div class="col-bc clf"><p class="user-name">{createName}</p><h3 class="">{content}</h3></div><span class="pub-time">{time}</span></li>';
            // 大图展示
            showBigPic('.pic-wrap img','.pic-wrap');
            // 修复active
            document.addEventListener("touchstart", function(){}, true);

            // 按需加载
            function lazyfun(){
                var xx = Lazy.create({
                    lazyId: "Jlazy_img",
                    trueSrc: '#src',
                    offset: 300, //灵敏度。如设置为100，表示滚动在距离目标位置100px执行，默认为半屏高度
                    delay: 100, //该毫秒时间内触发则延时100毫秒再加载
                    delay_tot: 1000 //滚动过程中多长时间后强行触发一次，默认值是 1000，单位毫秒
                });
                Lazy.init(xx);
            }
            lazyfun();
            $('.loadmore').click(function(event){
                var ele = $(this).find('i');
                // 先判断是不是在加载状态,若是初次点击 则给予loading动画，并在此处处理ajax，屏蔽掉多次点击
                // 加载成功后去掉class loading
                if(!ele.hasClass('loading')){
                    // load动画
                    ele.attr('data-txt',ele.html());
                    ele.html('');
                    ele.addClass('loading');
                    getReplyList(++pageNo,pageSize);
                }
            });
            $('.g-doc').on('tap', '.like', function(event) {
                var mylike = $(this);
                doPraise();
                setTimeout(function(){
                    mylike.removeClass('like-clicked');
                },400);
            });
            var publish = $("#J-txt-publish");
            publish.bind('focus', function(event) {
                if(!isLogin){
                    $("#loginDiv").css("display","block");
                    $(this).blur();
                    return false;
                }
                $(this).css('height', '120px');
                $('#J-pub-tools').show();
                // $(this).animate({height: '120px'},200, function() {
                //     $('#J-pub-tools').show();
                // });
            });
            $(".cancel-btn").click(function(event) {
                cancelEvent();
            });
            function cancelEvent(){
                publish.css('height','40px');
                publish.val("");
                $(".m-face-list").removeClass("face-show");
                $('#J-pub-tools').hide();
            }
            /*各种提示*/
            function showTips(msg){
                var tips = document.getElementById('Jtips');
                if(!tips) {
                    tips = document.createElement('div');
                    tips.id = 'Jtips';
                    tips.className = 'm-tips';
                    document.body.appendChild(tips);
                }
                tips.innerHTML = msg;
                tips.style.display = 'block';
                var tips_width = tips.clientWidth/2;
                tips.style.marginLeft = '-'+tips_width+'px';
                tips.style.opacity = 1;    
                setTimeout(function(){
                    tips.style.webkitTransition = 'all 0.3s ease-in';
                    tips.style.opacity = 0;
                    tips.style.marginTop = '-80px';
                    setTimeout(function(){
                        tips.style.display = 'none';
                        tips.style.marginTop = '-40px';
                    }, 300);
                }, 2000);
            }
            function doPraise(){
                if($("#doPraise").attr("isSending")=="true"){
                    return;
                }
                var praise = $("#doPraise").attr("data-isPraise");
                var submitPraise
                if(praise == isPraise){
                    submitPraise = 0;
                }else{
                    submitPraise = 1;
                }
                $("#doPraise").attr("isSending",true);
                $.ajax({
                    url:doPraiseUrl,
                    type:"post",
                    data:{
                        dynaInfoId:dynaInfoId,
                        createDate:createDate,
                        isPraise:submitPraise
                    },
                    dataType:"json",
                    success:function(data){
                        if(data && data.code ==0){
                            if(submitPraise == notPraise){
                                setPraise(false);
                            }else if( submitPraise == isPraise){
                                setPraise(true);
                            }
                        }else{
                            showTips(data.message);
                        }
                        $("#doPraise").attr("isSending",false);
                    },
                    error:function(){
                        showTips("网络错误");
                    }
                })
            }
            function setPraise(flg){
                var doPraise = $("#doPraise");
                var em = doPraise.find("em");
                var count = em.html();
                if(flg){
                     doPraise.removeClass("i-unlike");
                     doPraise.addClass("i-like like-clicked");
                     if(isNaN(count)){
                         em.html(1);
                     }else{
                         em.html(++count);
                     }
                     doPraise.attr("data-isPraise",isPraise)
                }else{
                     doPraise.removeClass("i-like");
                     doPraise.addClass("i-unlike like-clicked");
                     if(!isNaN(count)){
                        em.html(count==1?"赞":--count);
                     }
                     doPraise.attr("data-isPraise",notPraise);
                }
            }
            function getReplyList(pageNo,pageSize){
                $.ajax({
                    url:loadReplyUrl,
                    type:"get",
                    data:{
                        pageNo:pageNo,
                        pageSize:pageSize,
                        isTransFace:1,
                        dynaInfoId:"${dynaInfo.dynaInfoId}"
                    },
                    dataType:"jsonp",
                    success:function(data){
                        if( data && data.code == 0 ){
                            if(data.data && data.data.length>0){
                                var len = data.data.length;
                                var html = "";
                                for(var i = 0;i < len; i++){
                                    var result = data.data[i];
                                    html+=template(result);
                                }
                                $("#replyList").append(html);
                            }
                            if(pageNo == data.pageCount){
                                $("#J-loadmore1").hide();
                            }
                            loadReplyCallback();
                        }else{
                            showTips(data.message);
                        }
                    },
                    error:function(){
                        showTips("加载出错");
                    }
                });
            }
            function template(result){
                var html="";
                if(result){
                    html=replyHtml.replace(/{createName}/ig,result.nickName).replace(/{content}/ig,result.des).replace(/{time}/ig,result.time)
                    .replace(/{faceUrl}/ig,result.myIcon).replace(/{userUrl}/ig,result.myIconUrl);
                }
                return html;
            }
            function loadReplyCallback(){
                 // 先写为auto
                $('.con-wrap').css('height','auto');
                // 算新的height 赋给包裹层.con-wrap
                var curHeight = $("#J-loadmore1").parent().height();
                $('.con-wrap').height(curHeight);
                var el = $("#J-loadmore1").find("i");
                el.html(el.attr("data-txt"));
                el.removeClass("loading");
                lazyfun();
            }
            function replyDyna(){
                var isSend = $("#J-submitBtn").attr("data-isSending");
                if(isSend == "true"){
                    return;
                }
                if(!isLogin){
                    $("#loginDiv").css('display','block');
                    $(this).blur();
                    return false;
                }
                var content = $("#J-txt-publish").val();
                if(content == ""){
                    showTips("请输入内容");
                    return false;
                }
                $("#J-submitBtn").attr("data-isSending",true);
                $.ajax({
                    url:replyUrl,
                    type:"post",
                    data:{
                        oClubId:oClubId,
                        dynaInfoId:dynaInfoId,
                        postToDynaReplyId:0,
                        content:transformToBBSFace(content),
                        createDate:createDate
                    },
                    dataType:"json",
                    success:function(data){
                        if(data && data.code==0){
                            var result = data.data;
                            if(result){
                               var html=replyHtml.replace(/{createName}/ig,result.nickname).replace(/{content}/ig,result.showContent).replace(/{time}/ig,"刚刚")
                    .replace(/{faceUrl}/ig,result.myIcon).replace(/{userUrl}/ig,"${UCWAPROOT}/"+result.userId);
                        $("#replyList").prepend(html);
                        $("#replyDiv").show();
                             lazyfun();
                            }
                            cancelEvent();
                            showTips("发表成功");
                        }
                        $("#J-submitBtn").attr("data-isSending",false);
                    },
                    error:function(){
                        showTips("网络错误");
                        $("#J-submitBtn").attr("data-isSending",false);
                    }
                });
            }
            function login(){
                location.href="${UCWAPROOT}/passport/login.jsp?return="+location.href;
            }
        </script>
    </body>
</html>